/*
Grab it on GitHub https://github.com/melnik909/pure-css-text-loaders
*/


@import url('https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&display=swap');

/*
=====
UIA-TEXT_LOADER
=====
*/

.uia-text-loader__text {
	font-family: var(--uia-text-loader-font-family, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif);
	font-size: var(--uia-text-loader-font-size, 1rem);
	text-transform: var(--uia-text-loader-text-transform, uppercase);
	color: var(--uia-text-loader-text-shadow, rgba(0, 0, 0, 0.2));

	user-select: var(--uia-text-loader-user-select, none);
}

.uia-text-loader__letter {
	display: var(--uia-text-loader-letter-display, inline-flex);
	position: relative;
}

.uia-text-loader__letter-placeholder {
	color: var(--uia-text-loader-letter-color, initial);

	position: absolute;
	inset: 0;

	animation-duration: var(--uia-text-loader-animation-duration, 5s);
	animation-iteration-count: var(--uia-text-loader-animation-iteration-count, infinite);
	animation-fill-mode: var(--uia-text-loader-animation-fill-mode, backwards);
	animation-delay: var(--uia-text-loader-animation-delay);
}

@media (forced-colors: active) {

    .uia-text-loader__text {
        --uia-text-loader-letter-color: var(--uia-text-loader-letter-color-forced, #fefefe);
        forced-color-adjust: none;
    }
}

/* type 1*/

[data-uia-text-loader-type="uia-text-loader-type-1"] .uia-text-loader__letter-placeholder {
	animation-name: uia-text-loader-1;
}

@media (prefers-reduced-motion: no-preference) {

	@keyframes uia-text-loader-1 {

		0%, 10%, 90%, 100% {
			scale: 0;
		}

		20%, 75% {
			scale: 1;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

	@keyframes uia-text-loader-1 {

		0%, 10%, 90%, 100% {
			opacity: 0;
		}

		20%, 75% {
			opacity: 1;
		}
	}
}

/* type 2 */

[data-uia-text-loader-type="uia-text-loader-type-2"] .uia-text-loader__letter-placeholder {
	animation-name: uia-text-loader-2;
}

@keyframes uia-text-loader-2 {

	0%, 10%, 90%, 100% {
		opacity: 0;
	}

	11%, 55% {
		opacity: 1;
	}
}

/* type 3 */

[data-uia-text-loader-type="uia-text-loader-type-3"] .uia-text-loader__letter-placeholder {
    animation-name: uia-text-loader-3;
}

@media (prefers-reduced-motion: no-preference) {

    @keyframes uia-text-loader-3 {

        0%, 10%, 90%, 100% {
			transform: rotateY(-90deg);
			opacity: 0;
		}

		15% {
			opacity: .5;
		}

		20%, 75% {
			transform: rotateY(0);
			opacity: 1;
		}
	}
}

@media (prefers-reduced-motion: reduce) {

    @keyframes uia-text-loader-3 {

        0%, 10%, 90%, 100% {
            opacity: 0;
        }

        20%, 75% {
            opacity: 1;
        }
    }
}

/*
=====
ANIMATION DELAY 
=====
*/

/*
If your text differs from "Loading" you should create styles that
define the animation delay for each letter.

Use the --uia-text-loader-animation-delay option. You need set the letter
number as the first argument inside the calc() function.

The --uia-text-loader-delay-step is the delay will increase on that value.
The default value is 0.2s. If you wanna change it define the new value.

	EXAMPLE

	.uia-text-loader__letter {
	--uia-text-loader-delay-step: 0.3s;
	}
*/

.uia-text-loader__letter {
	--uia-text-loader-delay-step: 0.2s;
}

.uia-text-loader__letter:nth-child(2) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(2 * var(--uia-text-loader-delay-step))
}

.uia-text-loader__letter:nth-child(3) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(3 * var(--uia-text-loader-delay-step));
}

.uia-text-loader__letter:nth-child(4) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(4 * var(--uia-text-loader-delay-step));
}

.uia-text-loader__letter:nth-child(5) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(5 * var(--uia-text-loader-delay-step));
}

.uia-text-loader__letter:nth-child(6) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(6 * var(--uia-text-loader-delay-step));
}

.uia-text-loader__letter:nth-child(7) .uia-text-loader__letter-placeholder {
	--uia-text-loader-animation-delay: calc(7 * var(--uia-text-loader-delay-step));
}

/*
=====
PAGE STYLES
=====
*/
:root{
	--uia-text-loader-font-family: 'Cherry Bomb One', cursive;
	--uia-text-loader-font-size: 1.5rem;
	--uia-text-loader-letter-color: var(--accent-mode-color);
	--main-mode-color: #2e3444;
	--accent-mode-color: #e1e4e5;
}


body {
	margin: 0;
	background-color: var(--main-mode-color);
}

.page {
	box-sizing: border-box;
	min-block-size: 100dvh;
	padding: 3rem 2rem;

	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: 3rem;
}

.page__loader {
	margin: auto;
}